<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				height:2000px;
				
			}
			html{
				background: linear-gradient(black,red, blue); /* 标准的语法 */
			}
			.web{
				width: 148.66px;
				height: 200px;
				overflow: hidden;
				position:fixed;
				right:100px;
				bottom:20px;
				background:url(img/rocket.png);
			}
			.web:hover{
				background:url(img/rocket.png);
				background-position: -148.66px 0px;
			}
			.rocket {
				width: 148.66px;
				height: 200px;
				animation: rock steps(1, start) 1s infinite;
				display:none;
			}
			@keyframes rock {
				0% {
					transform: translate(0px, 0);
				}
				10% {
					transform: translate(-148.66px, 0);
				}
				20% {
					transform: translate(-297.32px, 0);
				}
				30% {
					transform: translate(-445.98px, 0);
				}
				40% {
					transform: translate(-594.64px, 0);
				}
				50% {
					transform: translate(-743.3px, 0);
				}
				60% {
					transform: translate(-297.32px, 0);
				}
				70% {
					transform: translate(-445.98px, 0);
				}
				80% {
					transform: translate(-594.64px, 0);
				}
				90% {
					transform: translate(-297.32px, 0);
				}
				100% {
					transform: translate(-743.3px, 0);
				}
			}
		</style>
	</head>
	<body>
		<div class="web">
			<div class="rocket">
				<img src="img/rocket.png" />
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
			
			$(".web").on("click",function(){	
				$(".rocket").css("display","block");
				$(".web").animate({
					"bottom":"2000",
				},1000,function(){
					$(".web").css("bottom","20");
					$(".rocket").css("display","none")
				});
				$("html").animate({
					"scrollTop":"0px"
				},400)
				
				
			})
			$(document).scroll(function(){
				console.log($(document).scrollTop());
			})
		</script>
	</body>

</html>